<template>
	<div class="container">
		<div class="header">
			<router-link to="/home">
				<i class="iconfont icon-back"></i>
			</router-link>
			<span class="header-title">我的订单</span>
		</div>
		<div class="nav">
			<ul class="nav-list">
				<li :class="{ active: status === 0 }" @click="status = 0">全部
					<span v-show="status === 0" class="tips">{{ orderList.length }}</span>
				</li>
				<li :class="{ active: status === 1 }" @click="status = 1">待付款
					<span v-show="status === 1" class="tips">{{ notPay }}</span>
				</li>
				<li :class="{ active: status === 2 }" @click="status = 2">已付款
					<span v-show="status === 2" class="tips">{{ okPay }}</span>
				</li>
			</ul>
			<!--内容-->
			<div class="content">
				<!--没商品-->
				<ul v-if="orderList.length === 0">
					<li class="no-orders">
						<p>目前没有待收货订单...</p>
					</li>
				</ul>
				<!--有商品-->
				<ul v-else>
					<li class="in-orders in-orders-cont" v-for="item in orderList" :key="item.id">
						<div class="title-orders">
							<img src="" alt="" style="width: 25px; margin-right: 7px;" />
							<p style="font-weight: 600; flex-grow: 1">有品精选</p>
							<span style="color: rgb(191, 17, 17); font-size: 14px; text-align: right;">
								{{ item.pay === 0 ? "待付款" : "待收货" }}
							</span>
						</div>
						<div class="in-detail" v-for="details in item.details" :key="details.id">
							<img :src="details.avatar" alt="" style="width: 90px; height: 90px" />
							<p class="details-name" v-text="details.name"></p>
							<div class="details-price">
								<span>￥{{ details.price }}</span>
								<span>x{{ details.count }}</span>
							</div>
						</div>
						<div>
							<p class="ji">倒计时：{{ hour }}:{{ minute }}:{{ second }}</p>
							<p class="total">
								共{{ item.details.reduce((count, item) => (count += item.count), 0) }}件商品,
								总金额￥{{ item.account }}
								<span>.00</span>
							</p>
							<div class="pay">
								<span @click="remove(item.orderId)">删除</span>
								<button @click="pay(item.orderId)" class="pay-btn" v-show="item.pay === 0">去支付</button>
								<button class="pay-btn" v-show="item.pay !== 0">查看详情</button>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { OrderApi } from "../../api";

export default {
	name: "Order",
	data() {
		return {
			status: 0,
			orderList: [],
			hours: 1,
			minutes: 10,
			seconds: 0
		};
	},
	watch: {
		status: {
			async handler(newValue) {
				switch (newValue) {
					case 0:
						this.orderList = await OrderApi.getAll();
						console.log(this.orderList)
						break;
					case 1:
						this.orderList = await OrderApi.getUnpay();
						break;
					case 2:
						this.orderList = await OrderApi.getPay();
						break;
				}
			},
			immediate: true,
			deep: true,
		},
	},
	methods: {
		async remove(id) {
			try {
				await this.$miConfirm("确定要删除吗?");
				await OrderApi.remove(id)
				this.orderList.splice(
					this.orderList.findIndex((item) => item.orderId === id), 1
				);
				this.$miNotice("删除成功");
			} catch (e) {/**/
			}
		},
		async pay(cid) {
			this.$router.push({
				path: `/pay/${cid}`,
			})
			//                                console.log(id)
			//				await OrderApi.pay(id)
		}

	},
	computed: {
		notPay() {
			return this.orderList.reduce((resust, item) => {
				if (!item.pay) {
					return resust += 1
				}
			}, 0)
		},
		okPay() {
			return this.orderList.reduce((resust, item) => {
				if (item.pay) {
					return resust += 1
				}
			}, 0)
		},
	}，
	watch: {
    // 监听数值变化
    second: {
      handler(newVal) {
        this.num(newVal)
      }
    },
    minute: {
      handler(newVal) {
        this.num(newVal)
      }
    },
    hour: {
      handler(newVal) {
        this.num(newVal)
      }
    }
  },
};
</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
}

.container {
	width: 100%;
	height: 100%;
	background-color: rgb(244, 244, 244);
}

.header {
	display: flex;
	flex-basis: auto;
	flex-grow: 0;
	height: 12vw;
	align-items: center;
}

.icon-back {
	font-size: 21px;
	font-weight: 600;
	flex-grow: 0;
	padding: 10px;
}

.header-title {
	justify-content: center;
	font-size: 19px;
	margin-left: 119px;
}

.icon-search {
	font-size: 16px;
	font-weight: 600;
	flex-grow: 0;
	margin-right: 7px;
	padding: 10px;
}

.nav {
	display: flex;
	flex-grow: 1;
	flex-basis: auto;
	flex-direction: column;
}

ul.nav-list {
	flex-direction: row;
	height: 40px;
	width: 375px;
	display: flex;
	flex-grow: 0;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
}

ul.nav-list li {
	color: rgb(102, 102, 102);
	font-size: 13px;
	align-items: center;
	justify-content: center;
	width: 20vw;
	box-sizing: border-box;
	text-align: center;
}

ul.nav-list li.active {
	align-items: center;
	background: linear-gradient(to right, rgb(240, 32, 23), rgb(221, 80, 9));
	border-radius: 11px;
	justify-content: center;
	position: relative;
	margin-right: 10px;
	margin-left: 10px;
	width: 12vw;
	line-height: 6vw;
	color: rgb(255, 255, 255);
	font-size: 13px;
}

ul.nav-list li span.tips {
	position: absolute;
	background-color: rgb(227, 13, 13);
	border-color: rgb(255, 255, 255);
	border-radius: 8px;
	line-height: 16px;
	right: -6px;
	top: -3px;
	width: 14px;
	align-items: center;
	box-sizing: border-box;
}

.content {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
}

/*没商品*/
.no-orders {
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.no-orders p {
	color: rgb(102, 102, 102);
	font-size: 12px;
	padding-top: 13px;
}

/*有商品的css设置*/
.in-orders {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	margin: 0px 10px 10px;
	background-color: rgb(255, 255, 255);
}

.in-orders-cont {
	padding-right: 10px;
	padding-left: 10px;
}

.title-orders {
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: row;
	line-height: 44px;
}

.in-detail {
	display: flex;
	flex-direction: row;
}

.details-name {
	flex-grow: 1;
	align-self: stretch;
	margin-top: 5vw;
}

.details-price {
	flex-shrink: 0;
	font-size: 13px;
	display: flex;
	flex-direction: column;
	text-align: right;
	color: #666;
}

.total {
	text-align: right;
	font-size: 14px;
	padding: 5px 0;
	color: #666;
}

.total span {
	font-size: 12px;
}

.pay {
	display: flex;
	justify-content: space-between;
	padding: 2vw 0;
}

.pay-btn {
	padding: 5px 10px;
	border: 0;
	background-color: red;
	color: #fff;
	font-size: 16px;
	border-radius: 20px;
}
</style>